<template>
  <div class="import-container">
    <el-dialog title="导入设备" :visible.sync="dialogVisible" width="500px" :before-close="closeAddDialog"
      :append-to-body="true">
      <div class="mini-dialog">
        <h3 class="title" style="margin-top: 5px">导入文件编辑注意事项：</h3>
        <div class="import-item">1、 已存在设备无法导入</div>
        <div class="import-item">
          2、请在对应单元格填写设备imei、设备id和产品类型
        </div>
        <div class="import-item">
          3、Excel输入单元格内不能出现中文、特殊符号及空格
        </div>
      </div>
      <div class="content">
        <div>
          <div class="btn-row">
            <el-upload ref="upload" action="#" :limit="1" accept=".xls,.xlsx" :multiple="false"
              :before-upload="beforeUpload" :on-change="handChange" :on-exceed="handleExceed" :auto-upload="false"
              :http-request="uploadRequest">
              <el-button slot="trigger" size="small" type="primary">
                选取文件
              </el-button>
              <el-button size="small" type="info" @click="handleDownload">
                下载模板
              </el-button>
              <div class="el-upload__tip" slot="tip">
                只能上传Excel文件，且不超过500kb
              </div>
              <div class="el-upload__tip import-result" slot="tip">
                <el-collapse accordion style="width: 360px">
                  <el-collapse-item name="1">
                    <template slot="title">
                      <div style="color: #409eff">
                        <span>设备总数：{{ result.total }}</span>
                      </div>
                      <div style="color: #58b850; margin-left: 20px">
                        <span>成功：{{ result.success }}</span>
                      </div>
                      <div style="color: #ff0000; margin-left: 20px">
                        <span>失败：{{ result.failed }}</span>
                      </div>
                    </template>
                    <div>{{ result.failedList }}</div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-upload>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button slot="trigger" size="small" type="primary" @click="importStart">
          开始导入
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  // import {
  //   reqDeviceImport
  // } from "@api/api-device";
  export default {
    name: "importDevice",
    data() {
      return {
        dialogVisible: false,
        result: {
          total: 0,
          success: 0,
          failed: 0,
          failedList: "",
        },
        isXlsx: true,
        /* mini弹框 */
      };
    },
    methods: {
      // 上传前验证
      beforeUpload(file) {
        let Xls = file.name.split(".");
        if (Xls[1] !== "xls" || Xls[1] !== "xlsx") {
          this.isXlsx = false;
        }
      },
      // 因为 before-upload 是指在文件上传之前、文件已被选中，但还没上传的时候触发，而设置了 :auto-upload=“false” 后，文件上传事件不被再次调用，所以 before-upload 不生效，所以，限制大小的时候，需绑定在 :on-change 里面
      handChange(file) {
        const limitSize = file.size / 1024 / 1024;
        if (limitSize > 0.5) {
          this.$refs.upload.clearFiles();
          this.$modal.notifyWarning("上传文件大小不能超过 500KB!");
          return false;
        }
        let Xls = file.name.split(".");
        if (Xls[1] !== "xls" && Xls[1] !== "xlsx") {
          this.$refs.upload.clearFiles();
          this.$modal.notifyWarning("只能上传Excel文件!");
        }
      },
      handleExceed() {
        this.$modal.notifyWarning(`当前限制选择 1 个文件`);
      },
      // 自定义上传
      async uploadRequest(param) {
        const formData = new FormData();
        formData.append("file", param.file);
        formData.append("belongToPlatform", this.addForm.belongToPlatform);
        const loading = this.$loading({
          lock: true,
          text: "正在导入，请耐心等待~",
          spinner: "el-icon-loading",
          background: "rgba(255, 255, 255, 0.7)",
        });
        const res = await reqDeviceImport(formData);
        loading.close();
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        if (res.data.result.failed === 0) {
          // this.$modal.notifySuccess('导入成功');
        } else if (res.data.result.failed > 0 && res.data.result.success > 0) {
          // this.$modal.notifyWarning('导入有失败');
        } else {
          // this.$modal.notifyWarning('全部导入失败');
        }
        this.result.total = res.data.result.total;
        this.result.success = res.data.result.success;
        this.result.failed = res.data.result.failed;
        if (res.data.result.failedList[0]) {
          this.result.failedList = res.data.result.failedList.toString();
        }
      },
      handleDownload() {
        location.href =
          "https://huhutong2020.oss-cn-shenzhen.aliyuncs.com/2021/12/24/e1908bf30da2498c84b01be61cbe00ff.xls";
      },
      // 正式上传
      importStart() {
        this.$refs.refAddForm.validate(async (valid) => {
          if (valid) {
            this.$refs.upload.submit();
          }
        });
      },
      // 点击关闭大弹框
      closeAddDialog() {
        this.dialogVisible = false;
        this.result.total = this.result.success = this.result.failed = 0;
        this.result.failedList = "";
        // this.$refs.refAddForm.resetFields();
        this.$refs.upload.clearFiles();
        // this.$parent.getDeviceList();
      },
    },
  };
</script>

<style lang="less" scoped>
  @import url("../../common.less");

  .mini-dialog {
    margin: 10px 0 20px 24px;
    color: @primaryThemeTxtColor;
  }
  .el-upload__tip{
  color: @primaryThemeTxtColor;
}

  .content {
    width: 350px;
    position: relative;
    top: 0;
    bottom: 0;
    left: 20px;
    right: 0;

    // 按钮行
    .btn-row {
      .el-button {
        margin-right: 20px;
      }
    }
  }

  /* mini弹框 */
  .title {
    line-height: 30px;
  }

  .import-item {
    line-height: 24px;
  }

  ::v-deep .el-collapse {
    border: none;
  }

  ::v-deep .el-icon-arrow-right {
    color: @primaryThemeTxtColor;
  }
</style>